html,
body {
    height: 100%;
    margin: 0;
}

ul,
li {
    margin: 0;
    padding: 0;
}

li {
    list-style: none;
}

h1,
h2 {
    margin: 0;
}

p {
    margin: 0;
    padding: 0;
}

body {
    background: #F7F7F7;
}

/* 头部位置设置 */
.head-title {
    width: auto;
    height: 127px;
    background: #183D4E;
    color: rgba(217, 217, 217, 0.8);
    font-weight: 600;
    font-size: 28px;
    line-height: 35px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.configuration {
    width: auto;
    height: 90px;
    background: #FFFFFF;
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
    color: rgba(0, 0, 0, .87);

    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.main-control {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.param-control {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.control-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.start-end-control {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-right: 30px;
}

/* 头部选项卡设置 */
.submit-control {
    border: none;
    font-size: 0;
}

.submit-control.play {
    width: 35px;
    height: 35px;
    margin-right: 15px;
}

.submit-control.restart{
    width: 25px;
    height: 25px;
    margin-right: 15px;
}


button {
    border: none;
}

.submit-control.restart {
    background: url("../image/icon/restart.png") no-repeat center/contain;
}

.submit-control.play {
    background: url("../image/icon/play.png") no-repeat center/contain;
}

.param-control span {
    font-family: "Helvetica", "Arial", sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: rgba(0, 0, 0, .60);
}

.control-item {
    margin-right: 30px;
}

.param-control input {
    border: none;
    color: rgba(0, 0, 0, .60);
    border-bottom: 1px solid rgba(0, 0, 0, .50)
}

.param-control select {
    border: none;
    color: rgba(0, 0, 0, .60);
    border-bottom: 1px solid rgba(0, 0, 0, .50)
}

/* 主体位置设置 */
.main-simulation {
    display: flex;
    flex-direction: row;
}

.data-control {
    display: flex;
    flex-direction: row;
}

.data-choose {
    width: 281px;
}

.data-choose-main {
    width: 281px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.choose-data-source {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: rgba(0,0,0,0.6);
}

.text {
    margin-left: 5px;
    font-size: 16px;
    color: rgba(0,0,0,0.6);
}

.choose-data-source input {
    font-size: 8px;
    color: rgba(0,0,0,0.6);
}

.bp-network {
    display: flex;
    flex-direction: row;
}

.simulation-item-title {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

/* 主体内容设置 */
/* 标题 */
.data-table-title, .data-choose-title, .simulation-title, .details-title, .prediction-title {
    width: 121px;
    text-align: center;
    margin: 20px auto;
    color: rgba(0, 0, 0, .60);
    border-bottom: 1px solid rgba(0, 0, 0, .50)
}

/* 数据表配置部分 */
.data-table {
    justify-content: center;

    width: 181px;
    border-right: 1px solid #E8E8E8;
    border-bottom: 1px solid #E8E8E8;
}

.data-table-main {
    margin-left: 15px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.data-table-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.data-table-label {
    margin: 0 2px 10px;
    text-align: left;
    font-size: 12px;
    color: rgba(0, 0, 0, .60);
}

.data-table-span {
    margin: 0 2px 10px;
    text-align: left;
    font-size: 12px;
    color: rgba(0, 0, 0, .40);
}

/* 数据选择部分 */
.my-data-here {
    margin-top: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 188px;
    color: rgba(0, 0, 0, .60);
    background: #F7F7F7;
    border: 1px dashed #B1B1B1;
    border-radius: 10px;
}

.choose-data-source button {
    width: 145px;
    height: 32px;
    color: rgba(0, 0, 0, .60);
    background: #F7F7F7;
    border: 1px solid #CCCCCC;
    border-radius: 10px;
}

.choose-data-tip {
    margin-top: 20px;
    font-style: normal;
    font-weight: 400;
    font-size: 8px;
    line-height: 19px;

    color: #767676;
}

.simulation {
    margin-left: 126px;
    margin-right: 109px;
    width: 365px;
}

.layer-title {
    width: 100px;
    height: 30px;
    margin: 0 10px;
    text-align: center;
    font-size: 12px;
    color: rgba(0, 0, 0, .60);

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.button-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.simulation-item-title button {
    border: none;
    border-radius: 100%;
    width: 8px;
    height: 8px;
    margin: 5px;
}

.input-layer-add, .hide-layer-add, .output-layer-add {
    background: url("../image/icon/plus.png") no-repeat center/contain;
}

.input-layer-minus, .hide-layer-minus, .output-layer-minus {
    background: url("../image/icon/minus.png") no-repeat center/contain;
}

.details {
    width: 142px;
    margin-left: 30px;
    margin-right: 30px;
}

.details-main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.details-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
}

.details-label {
    margin: 0 2px 10px;
    text-align: left;
    font-size: 12px;
    color: rgba(0, 0, 0, .60);
}

.details-span {
    margin: 0 2px 10px;
    text-align: left;
    font-size: 12px;
    color: rgba(0, 0, 0, .40);
}

.prediction {
    width: 142px;
    margin-left: 10px;
    margin-right: 10px;
}

/* BP模拟 向量组 */
.simulation-vector {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.layer-vector {
    width: 100px;
    margin: 5px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.I, .H, .O {
    width: 38px;
    height: 38px;
    margin: 5px;
    background: #D9D9D9;
    border-radius: 100%;
}

.connect-node {
    position: absolute;
    z-index: -1;
}